<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <iframe src="../html/header.html" frameborder="0" scrolling="no" width="100%" height="160px"></iframe>
    <!-- 导航 -->
    <section>
        <ul class="sec-nav">
            <li><a href="../index.html">首页</a></li>
            <li><a href="../html/all-flower.html">鲜花</a></li>
            <li><a href="#">水果花束</a></li>
            <li><a href="#">设计师臻选</a></li>
            <li><a href="#">星座专场</a></li>
            <li><a href="#">永生瓶花</a></li>
            <li>
                <a href="#">鲜花批发</a>
                <div class="nav-wholesale">
                    <ul>
                        <li><a href="">玫瑰花</a></li>
                        <li><a href="">洋桔梗</a></li>
                        <li><a href="">绣球花</a></li>
                        <li><a href="">康乃馨</a></li>
                        <li><a href="">百合花</a></li>
                        <li><a href="">向日葵</a></li>
                        <li><a href="">郁金香</a></li>
                        <li><a href="">满天星</a></li>
                        <li><a href="">乒乓菊</a></li>
                        <li><a href="">紫罗兰</a></li>
                        <li><a href="">雏菊</a></li>
                        <li><a href="">黄莺</a></li>
                        <li><a href="">相思梅</a></li>
                        <li><a href="">勿忘我</a></li>
                        <li><a href="">马蹄莲</a></li>
                        <li><a href="">扶郎花</a></li>
                        <li><a href="">菊花</a></li>
                        <li><a href="">马蹄莲</a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">绿植专区</a></li>
            <li><a href="#">花语大全</a></li>
        </ul>
    </section>
    <!-- 登录 -->
    <div class="login">
        <div class="log-big">
            <h2>用户登录</h2>
            <ul>
                <li><label>用户名：</label><input type="text" id="username"></li>
                <li><label>密码：</label><input type="text" id="password"></li>
            </ul>
            <div class="log-btn"><button>立即登录</button></div>
        </div>
    </div>
    <!-- 尾部 -->
    <iframe src="../html/footer01.html" frameborder="0" scrolling="no" width="100%" height="410px"></iframe>
    <script>
        /*
        接口地址：http://jx.xuzhixiang.top/ap/api/login.php
        接口请求方式：get
        接口参数：
          username用户名
          password密码
        使用方式
          http://jx.xuzhixiang.top/ap/api/login.php?username=11&password=1212
        */
        var logBtn=document.querySelector('.log-btn');
        logBtn.onclick=function(){
            var username=document.getElementById('username').value;
            var password=document.getElementById('password').value;
            var url='http://jx.xuzhixiang.top/ap/api/login.php';
            axios.get(url,{params:{username,password}}).then(res=>{
                // console.log(res);
                if (res.data.code==0) {
                    alert(res.data.msg);
                   
                }else{
                    alert(res.data.msg);
                    // 把id存入本地
                    localStorage.setItem('id',res.data.data.id);
                    // 登录的凭证
                    localStorage.setItem('token',res.data.data.token);
                    // 用户名
                    localStorage.setItem('username', res.data.data.username);
                    location.href='../index.html';
                }
            })
        }
    </script>
</body>

</html>